import React from 'react';
import { Icon } from 'antd-mobile'
import styles from '../styles.less'

function SongSheets({ children }) {
  return (
    <div style={{ background: '#fff' }}>
      <div className={styles.title}>
        <span className={styles['title-left']}>推荐歌单</span>
        <span className={styles['title-right']}>更多<Icon type="right"/></span>
      </div>
      <div className={styles.sheet}>
        {children}
      </div>
    </div>
  )
}

function Item ({ url, name }) {
  return (
    <div className={styles['sheet-item']}>
      <img 
        alt="歌单"
        src={url}
      />
      <span>{name}</span>
    </div>
  )
}
SongSheets.Item = Item
export default SongSheets